// pages/song/song.js
import request from '../../../utils/request'
import moment from 'moment'
import PubSub from 'pubsub-js'
// 获取小程序的实例对象
var appInstance = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    musicId: '', // 音乐的id数据
    isPlay: false, // 播放或者暂停的标识
    music: {}, // 歌曲对象信息
    currentTime: '00:00', // 实时播放的时间
    durationTime: '00:00', // 总时间
    musicLink: '', // 播放地址
    currentWidth: 0 // 进度条的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取传递进来的音乐的id数据
    const musicId = options.songId
    this.setData({
      musicId
    })
    // 调用方法,获取音乐的详情信息数据
    this.getMusicDetail(this.data.musicId)
    // 播放音乐了
    this.bgAudioManager = wx.getBackgroundAudioManager()
    // 页面一加载,立刻判断此时进入页面的时候传入进来的音乐id和全局实例对象中保存的音乐id是否一致,同时音乐的播放状态(全局中存储的)如果为true,直接设置此时页面的播放状态
    if (appInstance.globalData.musicId.toString() === musicId.toString() && appInstance.globalData.playStatus) {
      this.setData({
        isPlay: true
      })
    }
    // 监听背景音频播放事件
    this.bgAudioManager.onPlay(() => {
      appInstance.globalData.musicId = musicId
      this.changeMusicState(true)
    })
    // 监听背景音频暂停事件
    this.bgAudioManager.onPause(() => {
      this.changeMusicState(false)
    })
    // 监听背景音频停止事件
    this.bgAudioManager.onStop(() => {
      this.changeMusicState(false)
    })
    // 监听背景音频播放进度更新事件
    this.bgAudioManager.onTimeUpdate(() => {
      // 实时获取当前的播放时间,并且更新到页面上,同时计算进度条的位置
      const currentTime = moment(this.bgAudioManager.currentTime * 1000).format('mm:ss')
      // 当前的进度 = 总的进度*当前的播放时间/总的时间
      const currentWidth = 450 * this.bgAudioManager.currentTime / this.bgAudioManager.duration
      // 更新数据
      this.setData({
        currentTime,
        currentWidth
      })
    })
    // 监听背景音频自然播放结束事件
    this.bgAudioManager.onEnded(() => { 
      // 重置进度条和当前时间
      this.setData({
        currentTime: '00:00',
        currentWidth:0
      })
      // 自动播放下一曲的功能
      this.handlerSwitch({
        currentTarget: {
          id:'next'
        }
      })
    })


  },
  // 抽取相类似的代码
  changeMusicState (isPlay) {
    this.setData({
      isPlay
    })
    appInstance.globalData.playStatus = isPlay
  },


  // 获取音乐详情信息数据
  async getMusicDetail (ids) {
    const song = await request('/song/detail', { ids })
    // 把毫秒转成:  '00:00' 格式
    const durationTime = moment(song.songs[0].dt).format('mm:ss');
    // 更新数据
    this.setData({
      music: song.songs[0], // 音乐对象
      durationTime // 总时间
    })
    // 动态的设置页面的标题内容
    wx.setNavigationBarTitle({
      title: this.data.music.name
    })
  },
  // 播放音乐,实际上是控制播放按钮的显示状态及isPlay的状态信息
  handlerPlay () {
    const isPlay = !this.data.isPlay
    // 更新数据
    this.setData({
      isPlay
    })
    const { musicId, musicLink } = this.data
    // 控制播放:播放的是哪个音乐(音乐的id),播放的状态,音乐的播放是需要一个音乐的地址的
    this.musicControl(isPlay, musicId, musicLink)
  },
  // 控制音乐播放或者暂停的方法
  async musicControl (isPlay, musicId, musicLink) {
    // 判断播放状态
    if (!isPlay) {
      // 控制音乐暂停
      this.bgAudioManager.pause()
      return
    }
    // 判断播放地址是否存在
    if (!musicLink) {
      // 根据音乐的id获取音乐的播放地址
      const musicLinkData = await request('/song/url', { id: musicId })
      musicLink = musicLinkData.data[0].url
      // 保存播放地址
      this.setData({
        musicLink
      })
    }
    // 再次判断播放地址是否存在
    if (!musicLink) {
      wx.showToast({
        title: '请充钱',
        icon: 'none'
      })
      return
    }

    // 设置src属性,播放
    this.bgAudioManager.src = musicLink
    // 设置标题
    this.bgAudioManager.title = this.data.music.name
  },

  // 上一曲或者下一曲
  handlerSwitch (event) {
    // 订阅消息
    PubSub.subscribe('musicId', (msg, musicId) => { 
      this.setData({
        musicId
      })
      // 根据id获取音乐的详情,和播放地址,和播放操作
      this.getMusicDetail(musicId)
      this.musicControl(true, musicId)
      // 自己干掉自己
      PubSub.unsubscribe('musicId')
    })
    // 获取按钮标识
    const target = event.currentTarget.id
    // 发布消息
    PubSub.publish('switchType',target)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})